<template>
  <div id="app">
    <audio
      controls="controls"
      :hidden="true"
      :src="sound"
      ref="audio"
      loop="loop"
    ></audio>
    <audio
      controls="controls"
      :hidden="true"
      :src="notice"
      ref="audio1"
      loop="loop"
    ></audio>
    <router-view />
  </div>
</template>

<script>
import sounds from "@/assets/new.mp3";
import notice from "@/assets/7627.wav";
import transferStation from "./utils/transferStation";
import { updateAgencyStatus } from "@/api/agency";
import router from "@/router";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      sound: sounds,
      notice: notice,
    };
  },
  computed: {
    ...mapGetters(["alertNotice", "fireAlarm", "fireStop"]),
  },
  mounted() {
    let that = this;
    transferStation.$on("openAudio", function (msg) {
      console.log(msg);
      that.openAudio();
    });
    transferStation.$on("closeAudio", function (msg) {
      console.log(msg);
      that.closeAudio();
    });
    transferStation.$on("openAudio1", function (msg) {
      console.log(msg);
      that.openAudio1();
    });
    transferStation.$on("closeAudio1", function (msg) {
      console.log(msg);
      that.closeAudio1();
    });
  },
  methods: {
    closeAudio() {
      this.$refs.audio.pause();
      this.$refs.audio.load();
    },
    openAudio() {
      this.$refs.audio.currentTime = 0;
      this.$refs.audio.play();
    },
    closeAudio1() {
      this.$refs.audio1.pause();
      this.$refs.audio1.load();
    },
    openAudio1() {
      this.$refs.audio1.currentTime = 0;
      this.$refs.audio1.play();
    },
    fireStopOnclick(val){
      console.log(val)
      if(val.noticeTYpe===6){
        this.$router.push("/securityAlarm/warningInfo/" + val.noticeId)
      }else if(val.noticeTYpe===7){
        this.$router.push("/fireAlarm/infoInfo/" + val.noticeId)
      }
    }
  },
  watch: {
    alertNotice: function (a, b) {
      if (a !== b && a) {
        // this.$refs.audio1.currentTime = 0;
        // this.$refs.audio1.play();
        this.$noticeAlarm.show(a).then((res) => {
          // switch (res) {
          //   case "enterInfo":
          //     this.closeAudio1();
          //     updateAgencyStatus({ ucId: a.ucId }).then((res) => {
          //       router.push("/taskManage/agencyInfo?ucId=" + a.ucId);
          //     });
          //     break;
          //   default:
          //     break;
          // }
        });
      }
    },
    fireAlarm: function (a, b) {
      if (a !== b && a) {
        // this.$refs.audio.currentTime = 0;
        // this.$refs.audio.play();
        this.openAudio()
        this.$fireAlarm.show(a).then((res) => {
          switch (res) {
            case "enterInfo":
              this.closeAudio();
              router.push("/fireAlarm/fireInfoInfo/" + a.ucId);
              break;
            default:
              break;
          }
        });
      }
    },
    fireStop: function (a, b) {
      if (a !== b && a) {
        this.closeAudio()
        let _this = this
        this.$notify({
          title: a.title,
          message: '<p style="cursor: pointer">'+a.message+'</p>',
          position: 'bottom-right',
          type: 'warning',
          duration: 10 * 60 * 1000,
          dangerouslyUseHTMLString: true,
          onClick(){
            _this.fireStopOnclick(a)
          }
        });
        // this.$ucMessage.show(a).then((res) => {
        //   this.$ucMessage.close();
        // });
      }
    },
  },
};
</script>

<style>
.el-notification{
  height: 200px;
  width: 5rem;
}
.el-notification__title{
  font-size: 24px;
}
.el-notification__content{
  margin: 0.2rem 0 0 0;
}
.el-notification__content p{
    font-size: 18px;
}
.el-notification__icon {
  height: 0.34rem;
  width: 0.34rem;
  font-size: 0.34rem;
}
</style>
